<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #5ee7df, #b490ca);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 350px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  overflow: hidden;
}

.container h2 {
  margin-bottom: 20px;
  color: #333;
}

.container input[type="text"],
.container input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.container input[type="submit"],
.container input[type="button"] {
  width: 100%;
  padding: 10px;
  background-color: #b490ca;
  border: none;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.container input[type="submit"]:hover,
.container input[type="button"]:hover {
  background-color: #8e63a1;
}

.container .register-link {
  margin-top: 10px;
}

.container .register-link a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.container .register-link a:hover {
  text-decoration: underline;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1497366754035-f200968a6e7f');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  z-index: -1;
}

</style>
</head>
<body>

<div class="background"></div>
<div class="container">
  <h2>用户登录</h2>
  <div class="row">
    <!-- <span>用户名</span> -->
    <input type="text" id="username" name="用户名" placeholder="用户名" required>
  </div>
  <div class="row">
    <!-- <span>密码</span> -->
    <input type="text" id="password" placeholder="密码" required>
  </div>
     <input id="submit" type="submit" value="登录" >
  <div class="register-link">
    <a id="Register" href="register.html">没有账号?注册</a>
  </div>
</div>
  <!-- 引入jquery -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- 实现前后端交互逻辑 -->
    <script>
        // 查询出来
        let  submitButton = document.querySelector('#submit');

        // 点击->事件
        submitButton.onclick = function() {
            //1.先获取输入框内容
            var username = $('#username').val();
            //let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value; 
            if(username == '' || password == ''){
                alert("当前输入的用户名或密码为空")
                return;
            }
            // 2.发送请求
            $.ajax({
                //请求
                url: '/user/login',
                type: 'post',
                data: {
                    username: username,
                    password: password
                },
                //响应
                success: function(body) {
                    //此处的body，相当于响应的user对象 json
                    //判断
                    console.log(body);
                    
                    if ( body.status == 200){
                        //登录成功
                        alert("登录成功");
                        //跳转到音乐页面
                        //location.assign('/musicList.html');
                        location.assign('/list.html');
                    } else {
                        alert("账号或密码错误!")
                    }
                
                }
            });
        }
    </script>
    

</body>
</html>

